<!--  -->
<template>
  <div>
    <Card>
      <p slot="title" >
        <Icon class="rotate-title-icon" style="color:#F9B87D" type="minus"></Icon>
          工作台
      </p>
      <Row :gutter="10" type="flex" >
        <Col v-for="(item,index) in workList" :key="item.id" :span="6"   :style="{marginBottom: '10px'}">
			<router-link :to="item.url">
				<infor-card
                :id-name="item.id"
                :end-val="item.count"
                iconType="android-person"
                :color="color1[index]"
                :colorb="color2[index]"
                :intro-text="item.name"
				
            ></infor-card>
			</router-link>
            
        </Col>
        
      </Row>
    </Card>
    <Card style="marginTop:10px;padding:0;">
        <Tabs v-if="user_type=='01'" type="card" @on-click='handleclickTabs' v-model="tabnames">
          	<TabPane v-if="btnp.sbwxiu" name="fault" label="故障统计">
				<div v-if="tabfault">
					<Card>
						<p slot="title" >
							<Icon class="rotate-title-icon" style="color:#2F65EB" type="minus"></Icon>
							故障设备类型TOP5
						</p>
						<Row>
							<Col :span="12">
							<pie :id='pie1data.id' :name="pie1data.name"  :data="pie1_data"></pie>
							</Col>
							<Col :span="12">
							<Table :columns="tableFaultColumnList1" :data="tableFaultData1" border></Table>
							</Col>
						</Row>
					</Card>

					<Card style="margin-top:10px">
						<p slot="title" >
							<Icon class="rotate-title-icon" style="color:#2F65EB" type="minus"></Icon>
							报修机构TOP5
						</p>
						<Row>
							<Col :span="12">
							<pie :id='pie2data.id' :name="pie2data.name" :color="pie2data.colorRange" :data="pie2_data"></pie>
							</Col>
							<Col :span="12">
							<Table :columns="tableFaultColumnList2" :data="tableFaultData2" border></Table> 
							</Col>
						</Row>
					</Card>
					<Card style="margin-top:10px">
					<p slot="title" >
						<Icon class="rotate-title-icon" style="color:#2F65EB" type="minus"></Icon>
						报修数量
					</p>
					<bar :id="bardata.id" :firsttype="bardata.firsttype" :secondtype="bardata.secondtype" :data="bardata_data"></bar>
					</Card>
				</div>
            
          	</TabPane>
          	<TabPane v-if="btnp.bgypin" name="articles" label="办公用品">
				<div v-if="tabarticles">
					<Card>
						<p slot="title" >
							<Icon class="rotate-title-icon" style="color:#2F65EB" type="minus"></Icon>
							办公用品采购量TOP5
						</p>
						<Row>
							<Col :span="12">
							<pie :id='pie1data.id' :name="pie1data.name"  :data="pie1_data"></pie>
							</Col>
							<Col :span="12">
							<Table :columns="tableFaultColumnList1" :data="tableFaultData1" border></Table>
							</Col>
						</Row>
					</Card>

					<Card style="margin-top:10px">
						<p slot="title" >
							<Icon class="rotate-title-icon" style="color:#2F65EB" type="minus"></Icon>
							机构采购金额TOP5
						</p>
						<Row>
							<Col :span="12">
							<pie :id='pie2data.id' :name="pie2data.name" :color="pie2data.colorRange" :data="pie2_data"></pie>
							</Col>
							<Col :span="12">
							<Table :columns="tableFaultColumnList2" :data="tableFaultData2" border></Table> 
							</Col>
						</Row>
					</Card>
					<Card style="margin-top:10px">
					<p slot="title" >
						<Icon class="rotate-title-icon" style="color:#2F65EB" type="minus"></Icon>
						历史采购金额
					</p>
					<bar :id="bardata.id" :firsttype="bardata.firsttype" :secondtype="bardata.secondtype" :data="bardata_data"></bar>
					</Card>
				</div>
			</TabPane>
          	<TabPane v-if="btnp.pzqling" name="voucher" label="凭证认领">
				  <div v-if="tabvoucher">
					<Card>
						<p slot="title" >
							<Icon class="rotate-title-icon" style="color:#2F65EB" type="minus"></Icon>
							凭证采购量TOP5
						</p>
						<Row>
							<Col :span="12">
							<pie :id='pie1data.id' :name="pie1data.name"  :data="pie1_data"></pie>
							</Col>
							<Col :span="12">
							<Table :columns="tableFaultColumnList1" :data="tableFaultData1" border></Table>
							</Col>
						</Row>
					</Card>

					<Card style="margin-top:10px">
						<p slot="title" >
							<Icon class="rotate-title-icon" style="color:#2F65EB" type="minus"></Icon>
							机构采购金额TOP5
						</p>
						<Row>
							<Col :span="12">
							<pie :id='pie2data.id' :name="pie2data.name" :color="pie2data.colorRange" :data="pie2_data"></pie>
							</Col>
							<Col :span="12">
							<Table :columns="tableFaultColumnList2" :data="tableFaultData2" border></Table> 
							</Col>
						</Row>
					</Card>
					<Card style="margin-top:10px">
					<p slot="title" >
						<Icon class="rotate-title-icon" style="color:#2F65EB" type="minus"></Icon>
						历史采购金额
					</p>
					<bar :id="bardata.id" :firsttype="bardata.firsttype" :secondtype="bardata.secondtype" :data="bardata_data"></bar>
					</Card>
				</div>
			</TabPane>
      	</Tabs>
				<Card v-else style="margin-top:10px">
              <p slot="title" >
                <Icon class="rotate-title-icon" style="color:#2F65EB" type="minus"></Icon>
                  近一个月数据
              </p>
              <bar v-if="mondata" :id="bardata.id" :firsttype="bardata.firsttype" :secondtype="bardata.secondtype" :data="bardata_data"></bar>
            </Card>
    </Card> 
  </div>
</template>

<script>
import accounting from 'accounting'
import util from '@/libs/util.js'
import inforCard from '@/components/inforCard.vue';
import pie from '@/components/echarts/pie.vue'
import bar from '@/components/echarts/bar.vue'
import {
	getWorkbench,
	getNearlyMonthData,
	getfaultEquip,
	getfaultInst,
	getfaultCount,
	getpurchaseC,
	getpurchaseM,
	getpurchaseHM,
	getPZpurchaseC,
	getPZpurchaseM,
	getPZpurchaseHM
} from '@/libs/get.js'
export default {
	name:'',
	components:{
		inforCard,
		pie,
		bar
	},
  	data () {
		return {
			btnp:{},
			btn:{
				sbwxiu:false,
				bgypin:false,
				pzqling:false
			},
			mondata:false,
			tabfault:false,
			tabarticles:false,
			tabvoucher:false,
			color1:['#CA8622','#40B9FA','#CF7354','#046BA2'],
			color2:['#FDECD2','#D4EDFB','#FAD7CB','#07A1F3'],
			url:{
				dshyh:'/organization/exver',
				csdwxrw:'/procedure/repaire?state=90',
				csdxjrw:'/procedure/check?state=02',
				dshbxr:'/organization/exver',
				dshywry:'/organization/reope'
			},
			user_type:'',
			userUuid:'',
			tabnames:'fault',
			tab:{
				fault:0,
				articles:0,
				voucher:0
			},
			workList:[],
			pie1_data:[],
			pie1data:{
				id:'pie-fault-1',
				name:'故障设备类型',
				data:[
				{value:335, name:'类型1'},
				{value:310, name:'类型2'},
				{value:234, name:'类型3'},
				{value:135, name:'类型4'},
				{value:1548, name:'类型5'}
				],
				colorRange:['#61A0A8','#D48265','#91C7AE','#749F83','#CA8622','#E6A869']
			},
			pie2_data:[],
			pie2data:{
				id:'pie-fault-2',
				name:'故障设备类型',
				data:[
				{value:335, name:'类型1'},
				{value:310, name:'类型2'},
				{value:234, name:'类型3'},
				{value:135, name:'类型4'},
				{value:1548, name:'类型5'}
				],
				colorRange:['#046BA2','#057BB9','#0692DB','#07A1F3','#40B9FA','#41abc5']
			},
			tableFaultData1:[],
			tableFaultData2:[],
			tableFaultColumnList1:[
				{
					title: this.tabnames=='fault'?'设备类型':this.tabnames=='articles'?'办公用品':'凭证',
					key: 'name'
				},
				{
					title: this.tabnames=='fault'?'故障数量':this.tabnames=='articles'?'采购总数':'采购总数',
					key: 'value',
					sortable: true
				},
				{
					title: '比例',
					key: 'ratio',
					sortable: true
				},
			],
			tableFaultColumnList2:[
				{
					title: '机构',
					key: 'name'
				},
				{
					title: this.tabnames=='fault'?'故障数量':'采购金额（元）',
					key: 'value',
					sortable: true
				},
				{
					title: '比例',
					key: 'ratio',
					sortable: true
				},
			],
			bardata_data:[],
			bardata:{
				id:'bar-fault',
				firsttype:'',
				secondtype:''
			}
		};
  	},
  	methods:{
		async faultf(){
			await this.getFaultE();
			await this.getFaultI();
			await this.getFaultC();
			this.tabfault=true;
		},
		async articlesf(){
			await this.getPurc();
			await this.getPurcM();
			await this.getPurcHM();
			this.tabarticles=true;
		},
		async voucherf(){
			await this.getPZPurc();
			await this.getPZPurcM();
			await this.getPZPurcHM();
			this.tabvoucher=true;
		},
		//第一页
		async getFaultE(){
			let res=await getfaultEquip();
			let response=res.data;
			if(response.code===200){
				let total=response.data.reduce((first,second)=>{return {count:first.count+second.count}},{count:0})
				let data=response.data.slice(0,5);
				let other=total.count-data.reduce((first,second)=>{return {count:first.count+second.count}},{count:0}).count;
				let a=[];
				if(other<=0){
					a=data;
				}else{
					a=[...data,{equipType:'其他',count:other}]
				}
				this.pie1_data=a.map(item=>{
					return {
						value:item.count,
						name:item.equipType
					}
				});
				this.tableFaultData1=this.pie1_data.slice(0,5).map(item=>{
					let {value,name,ratio}=item;
					ratio=(item.value*100/total.count).toFixed(2)+'%';
					return {value,name,ratio}
				})
			}else{
				this.$Notice.error({
					desc:response.msg
				});
			}
		},
		async getFaultI(){
			let res=await getfaultInst();
			let response=res.data;
			if(response.code===200){
				let total=response.data.reduce((first,second)=>{return {count:first.count+second.count}},{count:0})
				let data=response.data.slice(0,5);
				let other=total.count-data.reduce((first,second)=>{return {count:first.count+second.count}},{count:0}).count;
				let a=[];
				if(other<=0){
					a=data;
				}else{
					a=[...data,{name:'其他',count:other}]
				}
				this.pie2_data=a.map(item=>{
					return {
						value:item.count,
						name:item.name
					}
				});
				this.tableFaultData2=this.pie2_data.slice(0,5).map(item=>{
					let {value,name,ratio}=item;
					ratio=(item.value*100/total.count).toFixed(2)+'%';
					return {value,name,ratio}
				})
			}else{
				this.$Notice.error({
					desc:response.msg
				});
			}
		},
		async getFaultC(){
			let res=await getfaultCount();
			let response=res.data;
			if(response.code===200){
				this.bardata.firsttype='报修数量';
				this.bardata.secondtype='';
				this.bardata_data=response.data.map((item,index)=>{
						let a={};
						let d=item.date.split('-').map((item,index)=>{
							
							item=Number.parseInt(item);
							return item
						}).join('.');
						a.date=d;
						a.value1=item['count(o.uuid)'];
						return a
					});
			}else{
				this.$Notice.error({
					desc:response.msg
				});
			}
		},
		//第二页
		async getPurc(){
			let res=await getpurchaseC();
			let response=res.data;
			if(response.code===200){
				let total=response.data.reduce((first,second)=>{return {count:first.count+second.count}},{count:0})
				let data=response.data.slice(0,5);
				let other=total.count-data.reduce((first,second)=>{return {count:first.count+second.count}},{count:0}).count;
				let a=[];
				if(other<=0){
					a=data;
				}else{
					a=[...data,{orderNaeme:'其他',count:other}]
				}
				this.pie1_data=a.map(item=>{
					return {
						value:item.count,
						name:item.orderNaeme
					}
				});
				this.tableFaultData1=this.pie1_data.slice(0,5).map(item=>{
					let {value,name,ratio}=item;
					ratio=(item.value*100/total.count).toFixed(2)+'%';
					return {value,name,ratio}
				})
			}else{
				this.$Notice.error({
					desc:response.msg
				});
			}
		},
		async getPurcM(){
			let res=await getpurchaseM();
			let response=res.data;
			if(response.code===200){
				let total=response.data.reduce((first,second)=>{return {total:first.total+second.total}},{total:0})
				let data=response.data.slice(0,5);
				let other=total.total-data.reduce((first,second)=>{return {total:first.total+second.total}},{total:0}).total;
				let a=[];
				if(other<=0){
					a=data;
				}else{
					a=[...data,{name:'其他',total:other}]
				}
				this.pie2_data=a.map(item=>{
					return {
						value:item.total,
						name:item.name
					}
				});
				this.tableFaultData2=this.pie2_data.slice(0,5).map(item=>{
					let {value,name,ratio}=item;
					value=accounting.formatMoney(accounting.unformat(value),'',2,','),
					ratio=(item.value*100/total.total).toFixed(2)+'%';
					return {value,name,ratio}
				})
			}else{
				this.$Notice.error({
					desc:response.msg
				});
			}
		},
		async getPurcHM(){
			let res=await getpurchaseHM();
			let response=res.data;
			if(response.code===200){
				this.bardata.firsttype='采购总金额';
				this.bardata.secondtype='';
				this.bardata_data=response.data.map((item,index)=>{
						let a={};
						let d=item.date.split('-').map((item,index)=>{
							
							item=Number.parseInt(item);
							return item
						}).join('.');
						a.date=d;
						a.value1=item.total;
						return a
					});
			}else{
				this.$Notice.error({
					desc:response.msg
				});
			}
		},
		//第三页
		async getPZPurc(){
			let res=await getPZpurchaseC();
			let response=res.data;
			if(response.code===200){
				let total=response.data.reduce((first,second)=>{return {count:first.count+second.count}},{count:0})
				let data=response.data.slice(0,5);
				let other=total.count-data.reduce((first,second)=>{return {count:first.count+second.count}},{count:0}).count;
				let a=[];
				if(other<=0){
					a=data;
				}else{
					a=[...data,{name:'其他',count:other}]
				}
				this.pie1_data=a.map(item=>{
					return {
						value:item.count,
						name:item.name
					}
				});
				this.tableFaultData1=this.pie1_data.slice(0,5).map(item=>{
					let {value,name,ratio}=item;
					ratio=(item.value*100/total.count).toFixed(2)+'%';
					return {value,name,ratio}
				})
			}else{
				this.$Notice.error({
					desc:response.msg
				});
			}
		},
		async getPZPurcM(){
			let res=await getPZpurchaseM();
			let response=res.data;
			if(response.code===200){
				let total=response.data.reduce((first,second)=>{return {total:first.total+second.total}},{total:0})
				let data=response.data.slice(0,5);
				let other=total.total-data.reduce((first,second)=>{return {total:first.total+second.total}},{total:0}).total;
				let a=[];
				if(other<=0){
					a=data;
				}else{
					a=[...data,{name:'其他',total:other}]
				}
				this.pie2_data=a.map(item=>{
					return {
						value:item.total,
						name:item.name
					}
				});
				this.tableFaultData2=this.pie2_data.slice(0,5).map(item=>{
					let {value,name,ratio}=item;
					value=accounting.formatMoney(accounting.unformat(value),'',2,','),
					ratio=(item.value*100/total.total).toFixed(2)+'%';
					return {value,name,ratio}
				})
			}else{
				this.$Notice.error({
					desc:response.msg
				});
			}
		},
		async getPZPurcHM(){
			let res=await getPZpurchaseHM();
			let response=res.data;
			if(response.code===200){
				this.bardata.firsttype='采购总金额';
				this.bardata.secondtype='';
				this.bardata_data=response.data.map((item,index)=>{
						let a={};
						let d=item.date.split('-').map((item,index)=>{
							
							item=Number.parseInt(item);
							return item
						}).join('.');
						a.date=d;
						a.value1=item.total;
						return a
					});
			}else{
				this.$Notice.error({
					desc:response.msg
				});
			}
		},


		async getNearlyOneMonData(){
			let res=await getNearlyMonthData();
			let response=res.data;
			if(response.code===200){
				if(this.user_type=='00'){
					this.bardata.firsttype='新产生的维修单数量';
					this.bardata.secondtype='完成数量';
					
				}else{
					this.bardata.firsttype='接单数量';
					this.bardata.secondtype='完成数量';
				}
				this.bardata_data=response.data.list.map((item,index)=>{
						let a={};
						let d=item.date.split('-').map((item,index)=>{
							item=Number.parseInt(item);
							return item
						}).join('.');
						a.date=d;
						a.value1=item.count;
						a.value2=response.data.finishlist[index].count;
						return a;
					});
				this.mondata=true;
			}else{
				this.$Notice.error({
					title: '请求出错',
					desc:response.msg
				});
			}
		},
		async getWorkbenchAuto(){
			let res=await getWorkbench();
			if(res.status===200){
				let response=res.data;
				if(response.code===200){
				this.workList=response.data.map(item=>{
					item.url=this.url[item.id];
					return item
				});
				}else{
					this.$Notice.error({
						title: '请求出错',
						desc:response.msg
					});
				}
			}else{
				this.$Notice.error({
					title: '请求失败'
				});
			} 
    	},
		async handleclickTabs(name){
			if(name=='fault'){
				this.tabarticles=false;
				this.tabvoucher=false
				this.faultf();
			}else if(name=='articles'){
				this.tabfault=false;
				this.tabvoucher=false
				this.articlesf();
			}else{
				this.tabfault=false;
				this.tabarticles=false
				this.voucherf();
			}
			
		
		}
  	},
	created(){
		this.btnp=util.bpower(this,this.btn);
		util.isCustomer(this);
		this.getWorkbenchAuto();
		if(this.user_type!='01'){
			this.getNearlyOneMonData();
		}else{
			this.faultf();
		}

	}
  
}

</script>
<style lang='scss' >
@import './home.scss'
</style>